<!--
 * @Date: 2023-11-21 09:31:27
 * @LastEditTime: 2023-12-02 11:28:07
 * @Description: content
-->
<template>
  <uni-popup ref="_buy_notice" type="center">
    <view
      class="_buy_notice c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc67.png')})`
      }"
    >
      <view class="_buy_notice_hd">平台消费规则</view>

      <scroll-view class="_buy_notice_bd" scroll-y>
        <view v-html="ruleData.content"></view>
      </scroll-view>

      <view @click="isAgree = !isAgree" class="_buy_notice_agree">
        <view class="check icon">
          <image
            v-if="isAgree"
            :src="$img('/static/img2/cc44.png')"
            lazy-load
          ></image>

          <image v-else :src="$img('/static/img2/cc45.png')" lazy-load></image>
        </view>

        不再弹出消费规则
      </view>

      <view class="_buy_notice_ft">
        <view class="_buy_notice_ft_btn" @click="close">
          <image :src="$img('/static/img2/cc123.png')" lazy-load></image>

          <!-- 退出 -->
        </view>

        <view class="_buy_notice_ft_btn confirm" @click="confirm">
          <image :src="$img('/static/img2/cc124.png')" lazy-load></image>

          <!-- <text>同意规则并继续支付</text> -->
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      isAgree: false,
      ruleData: ''
    }
  },

  methods: {
    confirm() {
      this.close()
      if (this.isAgree) {
        uni.setStorageSync('_agree_buy_notice', true)
      }
      this.$emit('confirm')
    },

    close() {
      this.$refs._buy_notice.close()
    },

    open(opt) {
      this.ruleData = opt

      this.$refs._buy_notice.open()
    },

    async getRule(id, title = '') {
      let res = await this.$c.getRule(id, true)

      this.open({
        title: title,
        content: res.data
      })
    }
  }
}
</script>

<style lang="scss">
._buy_notice {
  width: 594rpx;
  padding: 0 0 30rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  ._buy_notice_hd {
    padding: 40rpx 0 30rpx;
    text-align: center;

    font-family: 光良酒-干杯体, 光良酒-干杯体;
    font-weight: 400;
    font-size: 32rpx;
    color: #ffffff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  }

  ._buy_notice_bd {
    height: 500rpx;
    width: 514rpx;
    margin: 0 auto;

    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
  }

  ._buy_notice_agree {
    margin-top: 30rpx;
    padding: 0 40rpx;
    display: flex;
    justify-content: center;

    .check {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    line-height: 32rpx;
  }

  ._buy_notice_ft {
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    transform: translateY(150%);

    ._buy_notice_ft_btn {
      width: 196rpx;
      height: 78rpx;
    }

    // .confirm {
    //   border-left: 1rpx solid #333;

    //   text {
    //     color: transparent;

    //     background: linear-gradient(
    //       90deg,
    //       #6adeff 0%,
    //       #7ab5ff 50%,
    //       #ff7feb 100%
    //     );
    //     background-clip: text;
    //   }
    // }
  }
}
.common_bg {
}
</style>
